import {  useState } from "react"
import s from './style.module.less'
// todolist
function Todo(){
  let [value,setValue]=useState('')
  let [list,setList]=useState([])
  let [count,setCount]=useState(0)
 
    function addItem(){
      if(!value.trim())return
      setList([...list,{
        value:value,
        id:count
      }])
      setCount(count+1)
      setValue('')
  }
  const deleteItem=(id)=>{
    setList(list.filter(item=>item.id!==id))
  }
  
  return <>
  <div className={s.Todo}>
  <input placeholder='todo..' value={value} onChange={(e)=>setValue(e.target.value)}></input>
  <button onClick={addItem}>add</button>
  
  {list.map((item)=><div key={item.id}>
    {item.value}
    <button onClick={()=>deleteItem(item.id)}>delete</button>
  </div>)}
  </div>
  </>
}
export default Todo